<template>
  <div class="head d-flex flex-column justify-content-center">
    <div v-if="userInfo">
      <div class="center d-flex flex-wrap justify-content-start">
        <img :src="userImg" />

        <div class="div1">{{ nickname }}</div>
        <div class="div2">{{ intro }}</div>
        <i class="i1" @click="goMessage"><van-icon name="chat-o" /></i>
        <i class="i2" @click="goSettings"><van-icon name="setting-o" /></i>
      </div>
    </div>
    <div v-else>
      <div
        class="center d-flex flex-wrap justify-content-start"
        @click="goLogin"
      >
        <img src="@/assets/unlogin_avatar.png" />
        <div class="div1">点击登录</div>
        <div class="div2">登陆体验更多功能</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useLocalStorage } from '../../utils/useLocalStorage'
import { baseUrl } from '@/api/request'
import { findUserById } from '@/api/service'
const userImg = ref()
const userInfo = ref()
const nickname = ref()
const intro = ref()
// @/assets/unlogin_avatar.png
onMounted(async () => {
  userInfo.value = JSON.parse(useLocalStorage.get('userInfo'))
  console.log(userInfo.value)
  const res: any = await findUserById(userInfo.value.id)
  console.log(res.data[0])
  userInfo.value = res.data[0]

  console.log('userInfo.value', userInfo.value)
  if (userInfo.value) {
    userImg.value = userInfo.value.avatar
      ? `${baseUrl}/images/${userInfo.value.avatar}`
      : new URL('../../assets/unlogin_avatar.png', import.meta.url).href
    nickname.value = userInfo.value.nickname
      ? userInfo.value.nickname
      : '真ikun'
    intro.value = userInfo.value.intro
      ? userInfo.value.intro
      : '这人很懒什么都没写'
  }
})

const router = useRouter()

const goLogin = () => {
  console.log('click login')
  router.push('login')
}
const goMessage = () => {
  router.push('Message')
}
const goSettings = () => {
  router.push('usersetting')
}
</script>

<style scoped lang="scss">
.head {
  height: 25vh;
  width: 100vw;
  background: linear-gradient(to right, rgb(88, 132, 185), rgb(206, 169, 174));
  border-radius: 0 0% 5% 5%;

  .center {
    // height: 50%;
    align-items: center;
    position: relative;

    // .img {
    //   margin-left: 0.3rem;
    //   height: 12.5vh;
    //   img {
    //     height: 100%
    // //   }
    // }
    img {
      margin-left: 0.3rem;
      height: 9vh;
    }
    .div1 {
      position: absolute;
      top: 25%;
      left: 12.5vh;
      font-size: 0.5rem;
      color: white;
    }
    .div2 {
      position: absolute;
      left: 12.5vh;
      top: 63%;
      font-size: 0.2rem;
      color: white;
    }
    .i1 {
      position: absolute;
      right: 1.4rem;
      top: 0.2rem;
      font-size: 0.6rem;
      color: white;
    }
    .i2 {
      position: absolute;
      right: 0.4rem;
      top: 0.2rem;
      font-size: 0.6rem;
      color: white;
    }
  }
}
</style>
